<template>
	<div class="login">
		<!-- 注释 -->
		<!-- 规则 -->
		<el-card class="login_card">
			<!-- <el-image class="login_image" :src='logo_url' fit="cover"></el-image> -->
			<p class="login_title">登录</p>
			<p class="login_desc">欢迎登录卧龙投流系统</p>
			<el-form ref="ruleForm" :model="form" :rules="rules">
				<el-form-item prop="username">
					<el-input placeholder="请输入管理员账号" v-model="form.username" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" placeholder="请输入管理员密码" v-model="form.password" prefix-icon="el-icon-lock">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button :loading="loginLoading" style="background-color: #5b89fe;color: #fff;"
						@click="submitForm('ruleForm')">登录</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		name: 'UserLogin',
		data() {
			return {
				// logo_url: require("@/assets//logo.svg"),
				form: {
					username: '',
					password: ''
				},
				loginLoading: false,
				rules: {
					username: [{
						required: true,
						message: '请输入管理员账号',
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: '请输入管理员密码',
						trigger: "blur"
					}]
				}
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.loginLoading = true;
						var that = this; // 通常不需要将 this 赋值给另一个变量，但在回调函数中为了保持上下文一致性可以这样做  
						that.$axios.post('umsAdmin/login', qs.stringify({
							"username": that.form.username,
							"password": that.form.password
						})).then((res) => {
							console.log(res.data);
							if (res.data.admin) {
								// 登录成功 1. 保存用户信息到 session  
								window.sessionStorage.setItem("user", JSON.stringify(res.data
									.admin)); // 通常最好将数据保存为字符串  
								// 只有在登录成功后才重定向到主页 
								console.log(window.sessionStorage.getItem("user"))
								that.$router.push('/');

							} else {
								that.$message.error({
									message: "登录失败"
								});
								that.form.password = "";
							}
							this.loginLoading = false; // 这里的 this 应该是指向 that，因为我们在回调函数内部  
						}).catch((error) => {
							// 处理 API 调用错误，比如网络错误或服务器错误  
							console.error('登录失败：', error);
							that.$message.error({
								message: "登录时发生错误"
							});
							that.loginLoading = false;
						});
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped>
	.login {
		width: 100%;
		height: 100%;
		background-image: url("../../assets/img/bg.jpeg");
		position: absolute;
		left: 0;
		top: 0;
		background-size: 100% 100%;
	}

	.login_card {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 20%;
		min-width: 300px;
		height: 500px;
		min-height: 500px;
		border-radius: 10px;
		text-align: center;
	}

	.login_image {
		width: 50px;
		height: 50px;
		margin-top: 40px;
	}

	.login_title {
		font-size: 25px;
		font-weight: bold;
	}

	.login_desc {
		letter-spacing: 2px;
		color: #999a9a;
	}
</style>